<template>
<div>

<div class="c1" style="padding:20px;">
	<el-row class="fl white" style="margin-left:20px;font-size:18px;">
		网 格 员 轨 迹
	</el-row>
	<el-row>
		<img src="@/assets/border.png" class="fl" style="margin-top:-5px;">
	</el-row>

	<el-row class="mt25">
		<el-form :inline="true" :model="form" size="small">
			
		    <el-form-item >

				<el-date-picker
			      v-model="form.start_time"
			      type="date"
			      format="yyyy-MM-dd"
			      value-format="yyyy-MM-dd"
			      placeholder="开始日期"
			      style="width:204px;">
			    </el-date-picker>
			    	<span class="ml10 mr10" style="color:#fff;">至</span>
			    <el-date-picker
			      v-model="form.end_time"
			      type="date"
			      format="yyyy-MM-dd"
			      value-format="yyyy-MM-dd"
			      placeholder="结束日期"
			      style="width:204px;">
			    </el-date-picker>

		    </el-form-item>

		    <el-form-item >
			    <el-cascader 
					style="width:442px;"
					filterable
					:options="treedata"
					:props="props1"
					filterable
					change-on-select
					v-model="selectedOptions">
					</el-cascader>
			</el-form-item>

			<el-form-item >
			    <el-input v-model="form.name" placeholder="网格员名"
			    style="width:172px;"
			    ></el-input>
			</el-form-item>

			<el-form-item>
			    <el-button type="primary" @click="search"
			    style="width:140px;background:rgba(10,137,145,1);"
			    >查 询</el-button>
			</el-form-item>
		</el-form>
	</el-row>
</div>


<div class="c2" style="padding:20px;">

<el-row>
<el-table
    :data="list.results"
    :header-cell-style="{
		'background-color': '#169098',
	    'color': '#fff',
	}"
    border
    height="580"
    :row-style="{
    	height : '53px'
    }"
    style="width: 100%">
    <el-table-column
      prop="name"
      align="center"
      show-overflow-tooltip	
      label="姓名">
    </el-table-column>

    <el-table-column
      prop="mobile"
      label="电话"
      align="center"
      show-overflow-tooltip	
      width="150">
    </el-table-column>

    <el-table-column
      prop="company_name"
      align="center"
      show-overflow-tooltip	
      label="所属网格">
    </el-table-column>
    <el-table-column
      width="50"
      align="center"
      label="操作">
      	<template v-if="scope.row.id" slot-scope="scope">
      		<el-button type="success" size="mini" 
      		icon="el-icon-view" circle
      		@click="playback(scope.row)">
      		</el-button>
      		<!-- <el-button type="primary" size="mini" 
      		icon="el-icon-tickets" circle
      		@click="info(scope.row)">
      		</el-button> -->
      	</template>
    </el-table-column>
  </el-table>
</el-row>

<el-row class="text-center mt20 mb20">
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNo"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="list.totalRecord">
</el-pagination>
</el-row>

</div>






</div>
</template>

<script>

import daterange from '@/components/daterange'

export default {
	
	name : 'trajectory',
	
	data () {
		return {
		  	s_e : [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

		  	//treedata : [],

		  	form : {
		  		start_time : this.$util.date2str(new Date()),
		  		end_time : this.$util.date2str(new Date()),
		  	},

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions : ['1'],

			list : {},

			pageNo : 1,
		  	pageSize : 10,
		}
	},

	props : {
		treedata: {
			type: Array,
			default () {
				return []
			},
		}
	},

	components : {
		daterange,
	},

	computed : {
	},

	methods : {
		init () {

			const day = this.$util.dateDiff(this.form.start_time, this.form.end_time);
			if(day < 0){
                this.$message.warning('开始时间不能在结束时间之后。');
                return;
			}

			this.$http({
				fun : 'trajectoryuserlist',
				grid_id : this.selectedOptions[this.selectedOptions.length - 1] + '',
				start_time : this.form.start_time + ' 00:00:00',
				end_time : this.form.end_time + ' 23:59:59',
				name : this.form.name,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('subUserList');
					console.log(res);
					//this.list = res;
					this.list = this.$util.tableAdd(res);
				}
			});
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},

		playback (item) {
			console.log('item');
			console.log(item);
			this.$emit('playback', {
				id : item.id,
				name : item.name,
				start_time : this.form.start_time + ' 00:00:00',
				end_time : this.form.end_time + ' 23:59:59',
			}, {
				type : item.type,
				mapinfo : item.mapinfo,
			});
			
		},

		info () {

		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.c1 {
	width:452px;
	height: 180px;
	background:rgba(8,55,73,0.95);
}

.c2 {
	width:452px;
	height: 646px;
	background-color: #083749;
	opacity: 0.95;
}
</style>
